var Console = ( function() {
    var KChoiceElement = "<option value=\"%VALUE%\">%NAME%</option>"
    var KButton = "<button id=\"%ID%\">%TEXT%</button>";
    var KConnectDropboxElement = "<div>You can "+KButton+" and thus continue your lessons on any device (or PC).</div>"
    var KAttributtionText = "This application uses language dictionaries from <a href=\"http://wiktionary.org\">Wiktionary.org</a> released under the <a href=\"http://creativecommons.org/licenses/by-sa/3.0/\">Creative Commons Attribution-Share-Alike License 3.0</a> and <a href=\"http://en.wiktionary.org/wiki/Wiktionary:GFDL\">GNU Free Documentation License</a>."
    var KAttributtionElement = "<div id=\"attribution\">"+KAttributtionText+"</div>"
    var KContainerElement = "<div id=\"consoleContainer\"><div id=\"left\"/><div id=\"right\"/></div>"
    var KFacebookLikeElement =
        "<div id=\"facebookLikeContainer\"> \
            <div class=\"fb-like\" data-href=\"https://dl.dropboxusercontent.com/spa/nw40qz3fkh49g8v/VocabularyTeacher/public/index.html\" \
            data-layout=\"button_count\" data-action=\"like\" data-show-faces=\"true\" data-share=\"true\"></div> \
        </div>"

    var KFacebookBootstrap =
        "<div id=\"fb-root\"></div> \
        <script>(function(d, s, id) { \
            var js, fjs = d.getElementsByTagName(s)[0]; \
            if (d.getElementById(id)) return; \
            js = d.createElement(s); js.id = id; \
            js.src = \"//connect.facebook.net/en_US/all.js#xfbml=1\"; \
            fjs.parentNode.insertBefore(js, fjs); \
        }(document, 'script', 'facebook-jssdk'));</script>"


    function Console(application, $parentElement, exercises) {
        this.m$parentElement = $parentElement;
        this.mExercises = exercises;
        this.mApplication = application;
    }

    Console.prototype.init = function() {
        var self = this;
        this.m$parentElement.contentElement().append(KContainerElement);
        var containerElementLeft = $("#consoleContainer #left");
        var containerElementRight = $("#consoleContainer #right");
        containerElementRight.append(KFacebookLikeElement);
        containerElementRight.append(KFacebookBootstrap);

        containerElementLeft.append(KAttributtionElement);
        if ((self.mApplication.mFileSystem.local && self.mApplication.mFileSystem.local.exists("dropbox-auth:")) ||
            window.location.hash.indexOf("access_token") != -1) {
            initDropbox(self);
        } else {
            containerElementRight.append(KConnectDropboxElement.replace("%ID%", "dropboxButton").replace("%TEXT%", "Connect your Dropbox"));
            $("#dropboxButton")
            .button({
                icons: {
                    primary: "dropbox"
                    }
            })
            .click(function() {
                initDropbox(self);
            });
        }


        if (this.mApplication.languages()) {
            containerElementLeft.append("<div class=\"ui-widget\"><label>Choose a language:</label><br><select id=\"languages\" style=\"width: 80%\"></select></div>");
            var $languages = $("#languages");
            for (var languageKey in this.mApplication.languages()) {
                var languageObj = this.mApplication.languages()[languageKey];
                var newLanguageElement = KChoiceElement.replace("%NAME%", languageObj.displayName()).replace("%VALUE%", languageKey);
                $languages.append(newLanguageElement);
            }

            containerElementLeft.append("<div class=\"ui-widget\"><label>Choose an excercise:</label><br><select id=\"exercises\" style=\"width: 80%\"></select></div>");
            var $exercises = $("#exercises");
            for (var i = 0; i < this.mExercises.length; i++) {
                var exercise = this.mExercises[i];
                var newExerciseElement = KChoiceElement.replace("%NAME%", exercise.name()).replace("%VALUE%", i);
                $exercises.append(newExerciseElement);
            }
        }
    }

    Console.prototype.currentChoice = function() {
        var currentLanguageOption = $("#languages").children( ":selected" );
        var currentExerciseOption = $("#exercises").children( ":selected" );
        return {
            language         : this.mApplication.languages()[currentLanguageOption.attr('value')],
            exercise         : this.mExercises[currentExerciseOption.attr('value')],
        };
    }

    KTitleSpan = "<span class=\"ui-icon dropbox\"></span><span> %USER%</span>";
    function initDropbox(self) {
        self.mApplication.mFileSystem.initDropbox(self.mApplication.mParams.dropboxKey)
        .then(function(user) {
            var connectDropboxButton = $("#dropboxButton");
            if (connectDropboxButton) {
                connectDropboxButton.remove();
            }

            self.m$parentElement.headerElement().append(KTitleSpan.replace("%USER%", user));
        });
    }

    return Console;
})();
